<nz-card nzSize="small" [nzBordered]="true">
  <div class="title">步骤名称</div>
  <span>{{ text}}</span>
</nz-card>

<nz-card nzSize="small" [nzBordered]="true">
  <div class="title">链接桩<i nz-icon nzType="plus" nz-tooltip nzTooltipTitle="添加链接桩"
      nzTooltipPlacement="left" (click)="addPort()"></i></div>
  <nz-table nzTemplateMode nzSize="small" nzBordered>
    <thead>
      <tr>
        <th nzAlign="center">序号</th>
        <th nzAlign="center">名称</th>
        <th nzAlign="center">
          操作
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of portData;let i=index">
        <td nzAlign="center">{{i+1}}</td>
        <td nzAlign="center">{{item.name|dataNull}}</td>
        <td nzAlign="center">
          <button nz-button nzType="link" type="button" (click)="editPort(item)">编辑</button>
          <button nz-button nzType="link" type="button" (click)="removePort(item)">删除</button>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<nz-card nzSize="small" [nzBordered]="true">
  <div class="title">按钮 <i nz-icon nzType="plus" nz-tooltip nzTooltipTitle="添加按钮"
      nzTooltipPlacement="left" (click)="addBtn()"></i></div>
  <ng-container [formGroup]="form">
    <ng-container formArrayName="btnArray">
      <ng-container *ngFor="let item of formArray;let i=index">
        <ng-container [formGroup]="item">
          <nz-input-group [nzAddOnAfter]="btn">
            <input type="text" nz-input placeholder="请输入" formControlName="value" />
          </nz-input-group>
          <ng-template #btn>
            <button nz-button nzType="primary" (click)="deleteBtn(i)"><i nz-icon
                nzType="delete"></i></button>
          </ng-template>
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-container>

</nz-card>
